<mk-drawer-form
    v-model="drawer"
    :loading="drawerLoading"
    :title="typeof drawerData.id === 'undefined' ? '添加' : '编辑'"
    @save="saveDrawer()">
    <el-form
        :model="drawerData" 
        ref="drawerData" 
        :rules="drawerRules" 
        label-width="70px">
        <el-form-item label="名称：" prop="title">
            <el-input v-model="drawerData.title" placeholder="请输入菜单名称" maxlength="100" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="父级：" prop="pid">
            <el-select v-model="drawerData.pid" filterable placeholder="输入文字可搜索父级">
                <el-option
                    v-for="(item, index) in tableTreeString"
                    :key="index"
                    :label="item.title"
                    :value="item.id">
                    <span v-html="item.treeString" class="mk-tree-name"></span>
                    {{ item.title }}
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="路径：" prop="path">
            <el-input v-model="drawerData.path" placeholder="请输入菜单访问路径" maxlength="255" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="排序：" prop="sort">
            <el-input type="number" v-model.number="drawerData.sort" placeholder="请输入菜单排序" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="图标：" prop="icon">
            <el-input v-model="drawerData.icon" placeholder="请输入菜单图标" :suffix-icon="drawerData.icon"></el-input>
            <el-link type="primary" :underline="false" target="_blank" href="https://element.eleme.cn/#/zh-CN/component/icon">点击从图标库中选择</el-link>
        </el-form-item>
        <el-form-item label="状态：" prop="status">
            <el-switch
                v-model="drawerData.status"
                active-color="#13ce66"
                :active-value="1"
                :inactive-value="0">
            </el-switch>
        </el-form-item>
        <el-form-item v-if="typeof drawerData.id === 'undefined'" label="列表：" prop="isList">
            <el-tooltip content="启动后自动添加查看权限" placement="top">
                <el-switch
                    v-model="drawerData.isList"
                    active-color="#13ce66"
                    :active-value="1"
                    :inactive-value="0">
                </el-switch>
            </el-tooltip>
        </el-form-item>
        <el-form-item label="菜单：" prop="ifshow">
            <el-tooltip content="启动后在系统左侧显示" placement="top">
                <el-switch 
                    v-model="drawerData.ifshow"
                    active-color="#13ce66"
                    :active-value="1"
                    :inactive-value="0">
                </el-switch>
            </el-tooltip>
        </el-form-item>
        <el-form-item label="日志：" prop="logwriting">
            <el-tooltip content="启动后系统会自动记录该操作的日志" placement="top">
                <el-switch 
                    v-model="drawerData.logwriting"
                    active-color="#13ce66"
                    :active-value="1"
                    :inactive-value="0">
                </el-switch>
            </el-tooltip>
        </el-form-item>
    </el-form>
</mk-drawer-form>